<!-- 注册页面 -->
<template>
	<view :style="$store.state.skin">
		<view class="overall">
			<!-- <image src="../../static/login-icon/logo.jpg" class="login-icon"></image> -->
			<view class="login-icon"></view>
		</view>
		<view class="login">
			<form @submit="formsumit">
				<input type="text" placeholder="手机号码" class="input" name="phone">
				<input type="safe-password" placeholder="请输入密码" class="input" name="password">
				<input type="text" placeholder="请再次输入密码" class="input" name="password_two">
				<!-- <input type="text" placeholder="邀请人邀请码 (选填)" class="input" name="invite"> -->
				<view class="auto">
					<button class="input register" form-type="submit">立即注册</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				
			};
		},
		onShow() {
			// 设置导航栏颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
			    backgroundColor: this.$store.state.presentColor
			});
		},
		methods:{
			notification(title){
				uni.showModal({
					title:title,
					showCancel:false
				});
			},
			async formsumit(e){
				let reg = /^1[3-9]{1}[0-9]{9}$/;
				let phone =e.detail.value.phone;
				let password =e.detail.value.password;
				let password_two =e.detail.value.password_two;
				let invite =e.detail.value.invite;
				if(phone.length==0){
					this.notification('请您填写手机号码');
				}else if(phone.length!==0 && reg.test(phone)!==true){
					this.notification('请输入正确的手机号码');
				}else if(phone.length!==0 && reg.test(phone)==true && password.length==0 || password_two.length==0){
					this.notification('请输入您的密码');
				} else if(password.length!==0 && password_two.length !== 0 && password !== password_two){
					this.notification('两次输入的密码不正确');
				}else if(password.length!==0 && password == password_two && reg.test(phone)==true){
					uni.showLoading({
						title: '注册中'
					});
					let data = await request.post('/api/user/register',{
						mobile : phone,
						password : password,
					});
					if(data.code === 1){
						uni.hideLoading();
						uni.showToast({
							title: data.msg,
							duration: 2000,
							icon:'none'
						});
						uni.setStorageSync("userData",data.data.userinfo);
						if(uni.getStorageSync('userData')){
							uni.switchTab({
								url:"/pages/mine/mine"
							});
						}
					}else {
						uni.hideLoading();
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.overall{
	width: 100%;
	height: 16.25rem;
	background: var(--login-bg) no-repeat;
	background-size:100% 11rem;
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
	}
	.login-icon{
		width: 7.199998560000288rem;
		height: 7.199998560000288rem;
		background: var(--login-LOGO) no-repeat;
		background-size: 100%;
	}
	.login{
		width: 100%;
		height: 32.0399999993592rem;
		margin-top: 1.7999999964rem;
		.auto {
			display: flex;
			justify-content: center;
			button::after {
				border: none !important;
			}
		}
	}
	.input{
		width: 18.18rem;
		height: 3rem;
		border:  0.0599999988rem solid #e1e1e1;
		margin: 0rem auto;
		border-radius: 2rem;
		padding-left: 1.1999999999976rem;
		box-sizing: border-box;
		margin-bottom: 0.77999999844rem;
		color: #282828;
		font-size: 13px;
	}
	.button{
		background-color: var(--nav-bg);
		color: #f2f2f2;
		font-size: 1.2rem;
		line-height: 3rem;
	}
	.register{
		background-color: transparent;
		border: 0.0599999988rem solid var(--nav-bg);
		color: var(--nav-bg);
		font-size: 1.2rem;
		line-height: 3rem;
	}
	.br{
		width: 100%;
		text-align: center;
		margin-bottom: 0.599998rem;
		color: #999999;
	}
</style>
